<template>
  <div class="progress-bar">
    <div class="bar" :style="width"></div>
  </div>
</template>

<script>
import {postMedia} from '../../utils/api.js';
import Tools from '../../utils/tools.js';

export default {
  name: 'progressBar',
  props: ['progress'],
  data(){
    return{
      pro:0,
      transition:null
    }
  },
  computed: {
    width() {
      let percentage = this.pro;
      if (isNaN(percentage) || percentage < 0) percentage = 0;
      if (percentage > 100) percentage = 100;
      return `width:${percentage}%`;
    }
  },
  watch:{
    progress(nv){
      this.transition&&this.transition.stop();
      this.transition=Tools.simpleTransition(this.pro,parseFloat(nv),0.1,(val)=>{this.pro=val},0.01)
    }
  }
};
</script>

<style lang="less">
.progress-bar {
  width: 100%;
  height: 9px;
  border-radius: 9px;
  overflow: hidden;
  background: #e6e6e6;
  .bar {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 9px;
    background-color: #428bca;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    //transition: .05s ease-out;
    animation: bar-stripes 1s linear infinite;
    &:after {
      content: ' ';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 128px;
      border-radius: 9px;
      background: linear-gradient(to right, transparent, #00dcff 50%, rgb(207, 251, 255) 95%);
      mix-blend-mode: color-dodge;
      transform-origin: right;
      opacity: .25;
      //animation: bar-shine 4s ease-in-out infinite alternate;
    }
  }
  @keyframes bar-stripes {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -20px 0;
    }
  }
  @keyframes bar-shine {
    from {
      transform: scaleX(.5);
    }
    to {
      transform: scaleX(1);
    }
  }
}
</style>